<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QeePHP 应用开发权威指南</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="page">


<div class="guide-section">

  <div class="guide-header">
    <span class="nav">
      <a href="http://qee13.com/app/?action=docs">文档索引</a>
      &raquo;
      <a href="index.html">QeePHP 应用开发权威指南</a>
      &raquo;
      <a href="node-form.html">表单控件</a>
      &raquo;
      自定义控件    </span>
  </div>

  <div class="guide-section-details formatted">
    
<h1>自定义控件</h1>

<p>在 Web 应用中，表单的使用非常多，QeePHP
自带了常用的控件，但是我们实际生产中会有不同的需求，如果这个需求是多次重复使用，那么我们很有必要将它封装为固定的控件，便于更新和使用。</p>

<h2>所见即所得编辑器</h2>

<p>现在大部分的网站都会用到所见即所得编辑器，例如论坛主题的发布，新闻的提交等等。我们下面就来自定义一款自己的所见即所得的编辑器控件，方便在以后的view中直接使用。</p>

<p>这次我们选择的所见即所得编辑器为KindEditor
（http://xheditor.com/），将下载下载的压缩包解压到 public
目录下面，以便我们以后调用。</p>

<p>在 _code/control 目录下面建立 xheditor.php
文件，并添加一下内容：</p>

<pre class="php code"><span class="kw2">&lt;?php</span>
<span
class="kw2">class</span> Control_Xheditor <span
class="kw2">extends</span> QUI_Control_Abstract <span
class="br0">&#123;</span>
        <span class="kw3">static</span> <span
class="re0">$inited</span><span class="sy0">=</span><span
class="kw2">false</span><span class="sy0">;</span>
        <span
class="kw2">function</span> render<span class="br0">&#40;</span><span
class="br0">&#41;</span><span class="br0">&#123;</span>
                <span
class="re0">$mode</span><span class="sy0">=</span><span
class="re0">$this</span><span class="sy0">-&gt;</span>_extract<span
class="br0">&#40;</span><span class="st_h">'mode'</span><span
class="sy0">,</span><span class="nu0">1</span><span
class="br0">&#41;</span><span class="sy0">;</span>
                <span
class="re0">$this</span><span class="sy0">-&gt;</span><span
class="me1">class</span><span class="sy0">=</span><span
class="st0">&quot; xheditor&quot;</span><span
class="sy0">;</span>
                <span class="kw1">if</span> <span
class="br0">&#40;</span><span class="re0">$mode</span> <span
class="sy0">==</span><span class="nu0">1</span><span
class="br0">&#41;</span><span
class="br0">&#123;</span>
                        <span
class="re0">$this</span><span class="sy0">-&gt;</span><span
class="me1">class</span><span class="sy0">.=</span><span
class="st0">&quot;{tools:'full',internalScript:true,inlineScript:true,linkTag:true,showBlocktag:true,cleanPaste:0}&quot;</span><span
class="sy0">;</span>
                <span
class="br0">&#125;</span>
                <span class="re0">$out</span><span
class="sy0">=</span><span class="st_h">''</span><span
class="sy0">;</span>
                <span class="kw1">if</span> <span
class="br0">&#40;</span><span class="sy0">!</span><span
class="kw2">self</span><span class="sy0">::</span><span
class="re0">$inited</span><span class="br0">&#41;</span><span
class="br0">&#123;</span>
                        <span
class="re0">$out</span><span class="sy0">.=</span><span
class="st_h">'&lt;script src=&quot;public/xheditor-1.1.14/xheditor-1.1.14-zh-cn.min.js&quot;&gt;&lt;/script&gt;'</span><span
class="sy0">;</span>
                        <span class="kw2">self</span><span
class="sy0">::</span><span class="re0">$inited</span><span
class="sy0">=</span><span class="kw2">true</span><span
class="sy0">;</span>
                <span
class="br0">&#125;</span>
                <span class="re0">$out</span><span
class="sy0">.=</span>Q<span class="sy0">::</span><span
class="me2">control</span><span class="br0">&#40;</span><span
class="st_h">'memo'</span><span class="sy0">,</span><span
class="re0">$this</span><span class="sy0">-&gt;</span><span
class="me1">id</span><span class="br0">&#40;</span><span
class="br0">&#41;</span><span class="sy0">,</span><span
class="re0">$this</span><span class="sy0">-&gt;</span><span
class="me1">attrs</span><span class="br0">&#40;</span><span
class="br0">&#41;</span><span class="br0">&#41;</span><span
class="sy0">-&gt;</span><span class="me1">render</span><span
class="br0">&#40;</span><span class="br0">&#41;</span><span
class="sy0">;</span>
                <span class="kw1">return</span> <span
class="re0">$out</span><span class="sy0">;</span>
        <span
class="br0">&#125;</span>
<span class="br0">&#125;</span></pre>

<p>上面我们用到了 _extract
函数，它的主要作用是获得用户输入的配置值，例如在View：</p>

<pre class="php code"><span class="kw2">&lt;?php</span> <span
class="kw3">echo</span> Q<span class="sy0">::</span><span
class="me2">control</span><span class="br0">&#40;</span><span
class="st_h">'xheditor'</span><span class="sy0">,</span><span
class="st_h">'description'</span><span class="sy0">,</span><span
class="kw3">array</span><span class="br0">&#40;</span>
        <span
class="st_h">'mode'</span><span class="sy0">=&gt;</span><span
class="st_h">'big'</span><span class="sy0">,</span>
        <span
class="st_h">'value'</span><span class="sy0">=&gt;</span><span
class="re0">$someHTML</span>
<span class="br0">&#41;</span><span
class="br0">&#41;</span><span class="kw2">?&gt;</span></pre>
$Id: form-cusmize.texy 2013-08-16 17:33:28Z Tim13 $
  </div>

  <div class="guide-footer">

    <table border="0" width="100%">
      <tr>
        <td align="left" width="200">
                    &laquo;
          <a href="node-form-overview.html">概述</a>
          
        </td>

        <td align="center">
          本章：<a href="node-form.html">表单控件</a>
          <br />
          <a href="index.html">返回索引页</a>
        </td>

        <td align="right" width="200">
                    <a href="node-cache.html">缓存</a> 
          &raquo;
                  </td>
      </tr>
    </table>

  </div>

</div>


</div>

</body>
</html>


